<template>
  <div class="format-font">
    <Modal v-model="jobActionModal" :closable="false" :footer-hide="true" :mask-closable="false" :title="action.title + '任务'" width="650">
      <el-form ref="form" :model="newJobForm" label-width="130px">
        <el-form-item label="名称" prop="name" size="small">
          <el-input v-model="newJobForm.name" placeholder="请输入集群名称" style="width: 400px" type="text"></el-input>
        </el-form-item>
        <el-form-item label="描述" prop="description" size="small">
          <el-input v-model="newJobForm.description" placeholder="请输入描述信息" style="width: 400px" type="text"></el-input>
        </el-form-item>
        <el-form-item label="导入方式" prop="importType" size="small">
          <el-input v-model="newJobForm.importType" disabled style="width: 400px" type="text"></el-input>
        </el-form-item>
        <el-form-item label="源实例类型" prop="description" size="small">
          <el-input v-model="newJobForm.sourceType" disabled style="width: 400px" type="text"></el-input>
        </el-form-item>
        <el-form-item label="源实例" prop="sourceInstanceId" size="small" style="width: 400px">
          <el-select
            v-model="newJobForm.sourceInstanceId"
            size="mini"
            style="width: 400px"
            placeholder="请选择"
            class="form-item-width"
            :popper-append-to-body="false"
            popper-class="options-content"
            @change="selectSourceDatabase"
          >
            <el-option v-for="item in sourceInstancesList" :key="item.id" :label="`${item.host}(集群：${item.cluster.name})`" :value="item.id">
              {{ item.host }}(集群:{{ item.cluster.name }})
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="源Database" prop="sourceDatabaseId" size="small" style="width: 400px">
          <el-select
            v-model="newJobForm.sourceDatabaseId"
            size="mini"
            style="width: 400px"
            placeholder="请选择"
            class="form-item-width"
            :popper-append-to-body="false"
            popper-class="options-content"
          >
            <el-option v-for="item in sourceDatabasesList" :key="item.id" :label="item.name" :value="item.id">{{ item.name }} </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="目标实例类型" prop="description" size="small">
          <el-input v-model="newJobForm.destType" disabled style="width: 400px" type="text"></el-input>
        </el-form-item>
        <el-form-item label="目标实例" prop="destInstanceId" size="small" style="width: 400px">
          <el-select
            v-model="newJobForm.destInstanceId"
            size="mini"
            style="width: 400px"
            placeholder="请选择"
            class="form-item-width"
            :popper-append-to-body="false"
            popper-class="options-content"
            @change="selectDestDatabase"
          >
            <el-option v-for="item in destInstancesList" :key="item.id" :label="item.host" :value="item.id">集群:{{ item.cluster.name }}-(Instance: {{ item.host }})</el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="目标Database" prop="destDatabase" size="small" style="width: 400px">
          <el-select
            v-model="newJobForm.destDatabaseId"
            size="mini"
            style="width: 400px"
            placeholder="请选择"
            class="form-item-width"
            :popper-append-to-body="false"
            popper-class="options-content"
          >
            <el-option v-for="item in destDatabasesList" :key="item.id" :label="item.name" :value="item.id">{{ item.name }} </el-option>
          </el-select>
        </el-form-item>

        <el-form-item>
          <el-button size="small" type="primary" @click="ok('form')">{{ action.title }}集群信息</el-button>
          <el-button size="small" @click="cancel">取 消</el-button>
        </el-form-item>
      </el-form>
    </Modal>
  </div>
</template>

<script>
import { snakeCaseObject } from '@/libs/object'
import { createTransferJob, updateTransferJob } from '@/api/transfer/job'
import { errorNotify } from '@/libs/util'
import { getRdsInstanceList } from '@/api/rds/instance'
import { getRdsDatabaseList } from '@/api/rds/database'
export default {
  name: 'JobAction',
  props: {
    jobActionModal: {
      type: Boolean,
      default: false,
      require: true
    },
    jobInfo: {
      type: Object,
      default() {
        return {}
      }
    },
    action: {
      type: Object,
      default() {
        return {
          source: 'basic',
          title: '修改',
          type: 'update'
        }
      }
    }
  },
  data() {
    return {
      loading: false,
      sourceInstancesList: [],
      destInstancesList: [],
      destDatabasesList: [],
      sourceDatabasesList: [],
      JobForm: {},
      newJobForm: {},
      jobTypeChoice: [
        {
          value: 'oracle',
          lable: 'oracle'
        },
        {
          value: 'mysql',
          lable: 'mysql'
        }
      ]
    }
  },
  mounted() {
    this.setInitModelInfo()
    this.getRdsInstanceList()
  },
  methods: {
    cancel() {
      this.$emit('on-job-change', { type: 'cancel', status: false })
    },
    ok(formName) {
      this.$refs[formName].validate(async (valid) => {
        if (valid) {
          await this.actionJobInfo()
        } else {
          return false
        }
      })
    },
    async actionJobInfo() {
      const params = this.newJobForm
      try {
        if (this.action.type === 'update') {
          const { data } = await updateTransferJob(this.newJobForm.id, snakeCaseObject(params))
          this.$emit('on-job-change', { type: this.action.type, status: false, jobId: data.id })
        } else if (this.action.type === 'create') {
          const { data } = await createTransferJob(snakeCaseObject(this.newJobForm))
          this.$emit('on-job-change', { type: this.action.type, status: false, jobId: data.id })
        } else {
          return false
        }
      } catch (e) {
        errorNotify(e)
      }
    },
    setInitModelInfo() {
      this.newJobForm = this.$lodash.cloneDeep(this.jobInfo)
      this.newJobForm.importType = '从数据库创建'
      this.newJobForm.sourceType = 'oracle'
      this.newJobForm.destType = 'mysql'
    },
    selectSourceDatabase(instanceId) {
      this.getRdsDatabaseList(instanceId, 'source')
    },
    selectDestDatabase(instanceId) {
      this.getRdsDatabaseList(instanceId, 'dest')
    },
    async getRdsDatabaseList(instanceId, origin) {
      const { data } = await getRdsDatabaseList(snakeCaseObject({ instanceId: instanceId }))
      if (origin === 'source') {
        this.sourceDatabasesList = data
      } else {
        this.destDatabasesList = data
      }
    },
    async getRdsInstanceList() {
      const { data } = await getRdsInstanceList()
      const tmpSourceInstancesList = []
      const tmpDestInstancesList = []

      this.$lodash.forEach(data, function (item, index) {
        console.log(item)
        if (item.cluster.type === 'oracle') {
          tmpSourceInstancesList.push(item)
        } else if (item.cluster.type === 'mysql') {
          tmpDestInstancesList.push(item)
        }
      })
      this.sourceInstancesList = tmpSourceInstancesList
      this.destInstancesList = tmpDestInstancesList
    }
  }
}
</script>

<style scoped>
</style>
